<%@ page import="java.util.ArrayList" %>
<%@ page import="com.ftd.model.Ebook" %><%--
  Created by IntelliJ IDEA.
  User: apple
  Date: 16/7/30
  Time: 上午9:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh">
<head>
	<meta charset="UTF-8">

	<meta id="viewport" name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
	<%String path = request.getContextPath(); %>
	<link href="<%=path %>/css/mk-3Dcarousel.css" rel="stylesheet" type="text/css"/>
	<link href="<%=path %>/css/book.css" rel="stylesheet" type="text/css"/>
	<title>旋转木马</title>
	<%--<link rel="stylesheet" href="css/mk-3Dcarousel.css">--%>
	<%--<link rel="stylesheet" type="text/css" href="css/book.css">--%>
	<!-- 引入 jQuery 库 -->
	<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

	<!-- 引入 jQuery Mobile 库 -->
	<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>

<body>
<div style="margin-bottom:50px">
	<div class="Myimage">
		<ul id="image" >

		</ul>

	</div>
</div>
	<article class="htmleaf-container">
		<div class="container">
			<div class="mk-carousel" id="mkCarousel">

	        </div>
		</div>
	</article>
	<script>




	</script>


	<script src="<%=path%>/js/mk-3Dcarousel.js"></script>
    <script src="<%=path%>/js/custom.js"></script>
 	<script src="<%=path%>/js/books.js" type="text/javascript"></script>
	<script type="text/javascript">
		var oLength = 0 ;

		$(document).on("pagebeforecreate",function(eveKt){
			alert("启动了");
			var url = '/hibook/getIndexJson.do';
			oLength = load(url)
		alert("asd")
			$('.Myimage #image').kissSlider({
				prevSelector: '.Myimage .previous',
				nextSelector: '.Myimage .next',
				paginationSelector: '.Myimage .kiss-pagination',
				startIndex:3,
			});


		})
//		$(function(){
//			$('.Myimage #image').kissSlider({
//				prevSelector: '.Myimage .previous',
//				nextSelector: '.Myimage .next',
//				paginationSelector: '.Myimage .kiss-pagination',
//				startIndex:3,
//			});
//		})
		function reload (url) {
			$.get(url, function(data) {

				if (oLength<data.length){
					for(i=0;i<data.length;i++){
						var book = data[i]
						var bookli = $('<li></li>')
						var bookimg = $('<img />')

						bookli.attr("id","image"+i+1);
						bookimg.attr("src",book.itImageUrl);
						bookli.append(bookimg)
						$('#image').append(bookli)

						responesToPhone("true")

						oLength = data.length

					}
				} else{
					responesToPhone("true")
				}


			});
		}
		function load(url){
			$.get(url, function(data) {

				for(i=0;i<data.length;i++){
					var book = data[i]
					var bookli = $('<li></li>')
					var bookimg = $('<img />')

					bookli.attr("id","image"+(i+1));
					bookimg.attr("src",book.itImageUrl);
					bookli.append(bookimg)
					$('#image').append(bookli)

					responesToPhone("true")

					oLength = data.length


				}
				responesToPhone("true")

				return data.length

			});
		}
		function responesToPhone(isSuccess){
			alert("运行了")
//			window.webkit.messageHandlers.responesToPhone.postMessage(isSuccess);
		}
	</script>
</body>
</html>